<template>
  <el-config-provider :locale="locale">
    <div class="layout-container">
      <Header />
      <div class="main-content">
        <Sidebar v-model="activeMenu" />
        <div class="content-area">
          <el-scrollbar class="page-scrollbar">
            <DashboardPage v-if="activeMenu === 'overview'" />
            <BankDataPage v-if="activeMenu === 'bank'" />
            <OrderDataPage v-if="activeMenu === 'orders'" />
            <InvoicePage v-if="activeMenu === 'invoices'" />
            <SyncPage v-if="activeMenu === 'sync'" />
            <DataManagementPage v-if="activeMenu === 'data-management-list'" />
            <SettingsPage v-if="activeMenu === 'settings'" />
          </el-scrollbar>
        </div>
      </div>
    </div>
  </el-config-provider>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElScrollbar, ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useDataStore } from './stores/dataStore'
import { useConfigStore } from './stores/configStore'
import Header from './components/layout/Header.vue'
import Sidebar from './components/layout/Sidebar.vue'
import DashboardPage from './pages/DashboardPage.vue'
import BankDataPage from './pages/BankDataPage.vue'
import OrderDataPage from './pages/OrderDataPage.vue'
import InvoicePage from './pages/InvoicePage.vue'
import SyncPage from './pages/SyncPage.vue'
import DataManagementPage from './pages/DataManagementPage.vue'
import SettingsPage from './pages/SettingsPage.vue'

// 中文语言包
const locale = zhCn

// 当前激活的菜单
const activeMenu = ref('overview')

// 初始化Pinia stores
const dataStore = useDataStore()
const configStore = useConfigStore()

// 组件挂载时初始化
onMounted(() => {
  console.log('Options 页面已加载')
  // 加载统计数据
  dataStore.loadStatistics()
})
</script>

<style scoped>
.layout-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  background: #f0f2f5;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.content-area {
  flex: 1;
  /* padding: 20px; */
  overflow: hidden;
  background: #f0f2f5;
}

.page-scrollbar {
  height: 100%;
  :deep(.el-scrollbar__wrap) {
    overflow-x: hidden;
  }
}
</style>